<template>
    <div>
        <section class="home-wrapper">
            <div class="home-body-box">
                <div class="">
                    <article class="">
                        <el-form ref="form" :rules="formrules" :model="form">
                            <div class="text-right marginb">
                                <!-- <router-link to="/forgetpawm" class="maincolor">通过手机号找回密码</router-link> -->
                            </div>
                            <el-form-item prop="u_email">
                                <el-input v-model="form.u_email" placeholder="请输入注册时使用的邮箱地址"></el-input>
                            </el-form-item>
                            <div class="box clearfix">
                                <div class="dxcode box-flex fl">
                                    <el-form-item prop="verify">
                                        <el-input v-model="form.verify" placeholder="验证码"></el-input>
                                    </el-form-item>
                                </div>
                                <img src="/api/index/login/verify" onclick="this.src='/api/index/login/verify'" height="40" alt="验证码" v-if="isrefresh" class="piccode" />
                            </div>
                            <div class="box clearfix">
                                <div class="dxcode box-flex fl">
                                    <el-form-item prop="u_email_code">
                                        <el-input v-model="form.u_email_code" placeholder="请输入邮箱验证码"></el-input>
                                    </el-form-item>
                                </div>
                                <el-button type="primary" class="dxcodebtn fr" @click="getmcode" style="height: 40px;">获取验证码</el-button>
                            </div>
                            <el-form-item prop="u_password">
                                <el-input type="password" v-model="form.u_password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="confirm_password" style="margin-bottom: 42px;">
                                <el-input type="password" v-model="form.confirm_password" placeholder="请再次输入密码"></el-input>
                            </el-form-item>
                            <el-button type="primary" class="login-btn marginb" @click="refreshFun('form')">找回密码</el-button>
                        </el-form>
                    </article>
                    <div class="text-center">
                        <router-link to="/login" class="maincolor">转到登录页？</router-link>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import '../../assets/css/home.css';
    import {isvalidPhone,checkEmail} from '../../assets/js/validate.js'
    export default {
        data(){
            return{
                form: {
                    u_email: '',
                    u_password: '',
                    confirm_password: '',
                    verify: '',
                    u_email_code: ''
                },
                formrules: {
                    u_email: [
                        { required: true, message: '请输入联系人邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    u_password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    confirm_password: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' }
                    ],
                    verify: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                    u_email_code: [
                        { required: true, message: '请输入邮箱验证码', trigger: 'blur' }
                    ],
                },
                checked: true,  //记住密码
                isrefresh: true,  //刷新验证码
            }
        },
        methods: {
            //获取邮箱验证码
            getmcode(){

                var _this = this;
                
                if(!_this.form.u_email){
                    this.$message({
                        message: '请先输入邮箱地址',
                        type: 'warning'
                    });
                }else{
                    if(checkEmail(_this.form.u_email)){

                        this.$httpPost('/api/index/mail/email',{
                            'u_email': _this.form.u_email,
                            'type': 2,  //1注册账号   2找回密码
                        }).then(response => {
                            
                            if(response.code == 200){
                                
                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        })

                    }
                }
                
            },
            //找回密码
            refreshFun(){
                var _this = this;

                this.$httpPost('/api/index/login/resetPassWord',_this.form).then(response => {
                    
                    if(response.code == 200){
                        
                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });

                        setTimeout(function(){
                            _this.$router.push({'path': '/login'})
                        },2000)

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })

            },
        },
        mounted(){
            
        },
    }
</script>
